@import "reset";
@function r($px) {
    @return $px/40*1rem;
}


@mixin img {
    img {
        overflow: hidden;
        position: absolute;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
html,body{
    height: 100%;
}
.web{
//  transform: scale(0);
//  display: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/bgc.png) no-repeat 50% 50% / cover;
    z-index:51;
    .cont{
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
        position: relative;
        .zi{
            width: r(480);
            height: r(128);
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            margin-top: r(83);
            img{
                height: 90%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bottle{
            width: 50%;
            height: r(335);
            position: relative;
            overflow: hidden;
            float: left;
            img{
                height: 66%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
    }
}

//
.web_two{
    transform: scale(0);
    display: none;
    transform: scale(0);
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/two_jian.png) no-repeat 50% 50% / cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index:51;
    .cont{
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        position: relative;
        .zi{
            width: r(480);
            height: r(162);
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            margin-top: r(83);
            img{
                height: 100%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bottle{
            width: 50%;
            height: r(335);
            position: absolute;
            top: 47%;
            left: 50%;
            transform: translate(-50%,-50%);
            overflow: hidden;
            float: left;
            img{
                height: 100%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .yhk{
            width: r(226);
            height: r(79);
            position: absolute;
            left: 47%;
            top: 65%;
            transform: translate(-50%,0);
            img{
                height: 100%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bot{
            width: r(398);
            height: r(126);
            position: absolute;
            left: 50%;
            top: 80%;
            transform: translate(-50%,0);
            img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .diwen{
                width: r(230);
                height: r(60);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
             img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            }
        }
    }
}
//
.web_three{
    transform: scale(0);
    display: none;
    transform: scale(0);
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/two_jian.png) no-repeat 50% 50% / cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index:51;
    .cont{
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        position: relative;
        .zi{
            width: r(480);
            height: r(162);
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            margin-top: r(83);
            img{
                height: 100%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bottle{
            width: 35%;
            height: r(335);
            position: absolute;
            top: 47%;
            left: 50%;
            transform: translate(-50%,-50%);
            overflow: hidden;
            float: left;
            z-index: 10;
            img{
                height: 100%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bottle_two{
            width: 35%;
            height: r(335);
            position: absolute;
            top: 47%;
            left: 38%;
            transform: translate(-50%,-50%);
            overflow: hidden;
            float: left;
            z-index: 5;
            img{
                height: 85%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bottle_3{
            width: 35%;
            height: r(335);
            position: absolute;
            top: 47%;
            left: 29%;
            transform: translate(-50%,-50%);
            overflow: hidden;
            float: left;
            z-index: 4;
            img{
                height: 75%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bottle_4{
           width: 35%;
            height: r(335);
            position: absolute;
            top: 47%;
            left: 62%;
            transform: translate(-50%,-50%);
            overflow: hidden;
            float: left;
            z-index: 5;
            img{
                height: 85%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bottle_5{
            width: 35%;
            height: r(335);
            position: absolute;
            top: 47%;
            left: 72%;
            transform: translate(-50%,-50%);
            overflow: hidden;
            float: left;
            z-index: 4;
            img{
                height: 75%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .yhk{
            width: r(226);
            height: r(79);
            position: absolute;
            left: 47%;
            top: 65%;
            transform: translate(-50%,0);
            img{
                height: 75%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bot{
            width: r(398);
            height: r(126);
            position: absolute;
            left: 50%;
            top: 80%;
            transform: translate(-50%,0);
            img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .diwen{
                width: r(288);
                height: r(60);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
             img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            }
        }
    }
}
//
.web_four{
    transform: scale(0);
    display: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/beijing.png) no-repeat 50% 50% / cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index:51;
    .cont{
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        position: relative;
        .zi{
            width: r(480);
            height: r(100);
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            margin-top: r(70);
            img{
                width: 70%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .xone{
            width: 88%;
            height: r(60);
            margin: 0 auto;
            padding-bottom: r(43);
            span{
                font-size: r(34);
                line-height: r(60);
                color: #ffffff;
            }
            input{
                width: 80%;
                height: r(55);
                margin: 0 auto;
                border-radius: 5px;
                border: 1px;
                font-size: r(25);
                padding-left: r(10);
                margin-left: r(21);
                color: palevioletred;
            }
        }
        .xone:last-of-type{
            width: 88%;
            height: r(148);
            margin: 0 auto;
            padding-bottom: r(43);
            position: relative;
            overflow: hidden;
            p{
                display: inline-block;
                font-size: r(34);
                color: #ffffff;
                position: relative;
                top: 0;
                float: left;
            }
            textarea{
                float: left;
                width: 80%;
                height: r(148);
                margin: 0 auto;
                border-radius: 5px;
                border: 1px;
                font-size: r(28);
                padding-left: r(10);
                margin-left: r(21);
                resize: none;
                color: palevioletred;
            }
        }
        .bot{
            width: r(398);
            height: r(126);
            position: absolute;
            left: 50%;
            bottom: r(40);
            transform: translate(-50%,0);
            img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .diwen{
                width: r(230);
                height: r(60);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
             img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            }
        }
    }
}
//
.web_five{
    transform: scale(0);
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/fenx.png) no-repeat 50% 50% / cover;
    z-index:52;
    position: absolute;
    top: 0;
    left: 0;
    .cont{
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        .zho{
            width: 70%;
            height:70%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            img{
                height: 70%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .dier{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0,0,0,0.9);
            z-index: 55px;
            img{
                width: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
    }
}
//
.web_six{
    transform: scale(0);
    display: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/fenx_2.png) no-repeat 10% 10% / cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index:51;
    .cont{
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        position: relative;
        .zi{
            width: 95%;
            height: r(162);
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            margin-top: r(83);
            img{
                height: 60%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .yhk{
            width: r(226);
            height: r(79);
            position: absolute;
            left: 47%;
            top: 65%;
            transform: translate(-50%,0);
            img{
                height: 75%;
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                margin: auto;
            }
        }
        .bot{
            width: r(398);
            height: r(126);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .diwen{
                width: r(230);
                height: r(60);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
             img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            }
        }
        .bot_1{
            width: r(398);
            height: r(126);
            position: absolute;
            left: 50%;
            top: 66%;
            transform: translate(-50%,-50%);
            img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .diwen{
                width: r(280);
                height: r(80);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
             img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            }
        }
    }
}